<script setup lang="ts">
import { reactive, onMounted, watch } from 'vue';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
import { eventCenter, getCurrentInstance, showLoading } from '@tarojs/taro';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import { isJsonString } from '/@/utils/string-util';
const props = defineProps<{
  item: FlowPathTemplateApi.AttributeExtendDto;
}>();

const emits = defineEmits<{
  (e: 'onChange', id: string, name: string): void;
}>();
//局部
const state = reactive<{
  /**
   * 部门选择
   */
  departmentIsShow: boolean;
  deptId: string;
  deptName: string;
}>({
  departmentIsShow: false,
  deptId: '',
  deptName: '',
});

watch(
  () => props.item.attributeValue,
  () => {
    //页面-可编辑-默认选项-显示
    if (
      props.item.editAble === 1 &&
      props.item.attributeValue &&
      isJsonString(props.item.attributeValue)
    ) {
      const deptObj: { id: string; name: string } = JSON.parse(props.item.attributeValue);
      console.log('deptObj', deptObj);
      state.deptId = deptObj.id;
      state.deptName = deptObj.name;
    }
  },
);

//页面-可编辑-默认选项-显示
if (
  props.item.readonlyAble === 1 &&
  props.item.attributeValue &&
  isJsonString(props.item.attributeValue)
) {
  const deptObj: { id: string; name: string } = JSON.parse(props.item.attributeValue);
  console.log('deptObj', deptObj);
  state.deptId = deptObj.id;
  state.deptName = deptObj.name;
}

/**
 * 选择部门
 */
function selectDepartment(_organIds: string[], organs: AppCascaderOrganDto[]) {
  state.deptId = organs[organs.length - 1].value;
  state.deptName = organs[organs.length - 1].text;
  emits('onChange', state.deptId, state.deptName);
}

onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    //清理数据，当成功页面返回的时候，显示初始状态
    state.deptId = '';
    state.deptName = '';
    defaultDepartment();
  });
});

function defaultDepartment() {
  showLoading();
  LOGIN_APP().then((res) => {
    if (res.organDtos && res.organDtos.length > 0) {
      const organ = res.organDtos[0];
      state.deptId = organ.id || '';
      state.deptName = organ.name || '';
      emits('onChange', state.deptId, state.deptName);
    }
  });
}
</script>
<!-- 11-部门选择 -->
<template>
  <!--只读 -->
  <template v-if="item.readonlyAble === 1">
    <nut-cell :title="item.attributeName" :desc="state.deptName" />
  </template>
  <!--编辑 -->
  <template v-else>
    <nut-form-item
      :label="item.attributeName"
      :required="item.attributeRequired === 1"
      :label-width="120"
    >
      <view
        class="approve-edit-select-department"
        @click="state.departmentIsShow = !state.departmentIsShow"
      >
        <text>{{ state.deptName || (item.tips ? item.tips : '请选择部门') }}</text>
        <app-nut-icon-right />
      </view>
    </nut-form-item>
  </template>
  <app-organ-cascader
    title="选择部门"
    v-model="state.departmentIsShow"
    @on-selected="selectDepartment"
  />
</template>
<style lang="scss">
.approve-edit-select-department {
  display: flex;
  justify-content: flex-end;
}
</style>
